<template>
  <div class="body">
    <h1>{{ this.nowCheck }}</h1>
    <header><div id="main" ref="chinaRef"></div></header>
    <footer>
      <el-button
        size="mini"
        type="primary"
        v-for="(item, index) in chooseList"
        :key="index"
        @click="getData(index)"
      >
        {{ item }}
      </el-button>
    </footer>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
export default {
  data() {
    return {
      chartInstance: null,
      chooseList: ['今日新增', '现存确诊', '累计确诊', '累计治愈'],
      nowCheck: '今日新增',
      totalData: {}
    }
  },
  methods: {
    async initChart() {
      this.chartInstance = echarts.init(this.$refs.chinaRef)
      // const ret = await axios.get('http://47.100.123.64/static/map/china.json')
      const ret = await axios.get('../../static/map/china.json')
      echarts.registerMap('china', ret.data)
      const option = {
        title: {},
        tooltip: {
          trigger: 'item'
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            // dataView: {readOnly: false},
            // restore: {},
            // saveAsImage: {}
          }
        },
        series: [
          {
            name: this.nowCheck,
            type: 'map', // 告诉echarts 要去渲染的是一个地图
            map: 'china', // 告诉echarts  要去渲染中国地图
            label: {
              // 控制对应地区的汉字
              show: true,
              color: '#333', // 控制地区名的字体颜色
              fontSize: 10
            },
            itemStyle: {
              // 地图板块的颜色和边框
              areaColor: '#eee'
              // borderColor:'blue'
            },
            roam: true,
            zoom: 1.2, // 控制地图的放大和缩小
            emphasis: {
              // 控制鼠标滑过之后的背景色和字体颜色
              label: {
                color: '#fff',
                fontSize: 12
              },
              itemStyle: {
                areaColor: '#83b5e7'
              }
            },
            data: [] // 用来展示后台给的数据的 {name:xx,value:xxx}
          }
        ],
        visualMap: [
          {
            type: 'piecewise',
            show: true,
            // splitNumber:4,
            pieces: [
              // 分段
              { min: 10000 },
              { min: 1000, max: 9999 },
              { min: 100, max: 999 },
              { min: 10, max: 99 },
              { min: 1, max: 9 }
            ],
            // align:'right',// 默认left
            left: 20,
            // orient:'horizontal' 默认竖直
            // left right 这些属性控制 分段坐在的位置
            // showLabel:false
            // textStyle:{}
            inRange: {
              symbol: 'rect',
              color: ['#FFF9C4', '#FF5722']
            },
            itemWidth: 20,
            itemHeight: 10
          }
        ]
      }
      this.chartInstance.setOption(option)
    },
    async getData(index) {
      this.nowCheck = this.chooseList[index]
      const { data: res } = await this.$jsonp(
        'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5'
      )
      this.totalData = JSON.parse(res)
      let list = {}
      if (index === 0) {
        list = this.totalData.areaTree[0].children.map((item) => ({
          name: item.name,
          value: item.today.confirm
        }))
      } else if (index === 1) {
        list = this.totalData.areaTree[0].children.map((item) => ({
          name: item.name,
          value: item.total.nowConfirm
        }))
      } else if (index === 2) {
        list = this.totalData.areaTree[0].children.map((item) => ({
          name: item.name,
          value: item.total.confirm
        }))
      } else {
        list = this.totalData.areaTree[0].children.map((item) => ({
          name: item.name,
          value: item.total.heal
        }))
      }
      const chainOption = {
        series: [
          {
            name: this.nowCheck,
            data: list
          }
        ]
      }
      this.chartInstance.setOption(chainOption)

      window.addEventListener('resize', () => {
        this.chartInstance.resize()
      })
    }
  },
  mounted() {
    this.initChart()
    this.getData(0)
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.myChart.resize()
    })
  }
}
</script>

<style lang="scss" scoped>
.body {
  height: 100%;
  h1 {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 25px;
    color: #2587cd;
  }
  header {
    height: 83%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    #main {
      height: 100%;
      width: 100%;
    }
  }
  footer {
    display: flex;
    margin-top: 20px;
    justify-content: space-evenly;
  }
}
</style>
